
<!doctype html>
<html>
<head>

   <!-- player skin -->
   <link rel="stylesheet" type="text/css" href="../dist/skin/minimalist.css?f" />
   <link rel="stylesheet" href="http://demos.flowplayer.org/media/css/playlist.css" />

   <!-- site specific styling -->
   <style>
   body {
      font: 12px "Myriad Pro", "Lucida Grande", sans-serif;
      text-align: center;
      padding-top: 1%;
   }
   .flowplayer { width: 70%; }

   .fp-cuepoint {
     height: 100%;
     background-color: #f00;
     display: block;
     position: absolute;
     width: 10px;
     z-index: 10;
   }

   </style>

   <!-- include flowplayer -->
   <script src="../dist/flowplayer.js?i"></script>
   </head>

<body>

   <!-- the player -->
   <div id="player">
    </div>

    <script>
    var el = document.getElementById('player');
    var api = flowplayer(el, {
        splash: false,
        ratio: 0.417,
        adaptiveRatio: true,
        generate_cuepoints: true,
        playlist: [{
          preload: "none",
          sources: [
            {
              type: "video/webm",
              src: "http://edge.flowplayer.org/bauhaus/624x260.webm"
            },
            {
              type: "video/mp4",
              src: "http://edge.flowplayer.org/bauhaus/624x260.mp4"
            }
          ],
          cuepoints: [1.2, 2.4, 5, 9]
        }, {
          sources: [
          {
            type: "video/flash",
            src: "http://edge.flowplayer.org/flowplayer-700.flv"
          }]
        }, {
          preload: "none",
          sources: [
            {
              type: "video/webm",
              src: "http://edge.flowplayer.org/night1.webm"
            },
            {
              type: "video/mp4",
              src: "http://edge.flowplayer.org/night1.mp4"
            }
          ]
        }, {
          preload: "none",
          sources: [
            {
              type: "video/webm",
              src: "http://edge.flowplayer.org/night3.webm"
            },
            {
              type: "video/mp4",
              src: "http://edge.flowplayer.org/night3.mp4"
            }
          ],
          cuepoints: [2, 5, 9]
        }, {
          preload: "none",
          sources: [
            {
              type: "video/webm",
              src: "http://edge.flowplayer.org/night4.webm"
            },
            {
              type: "video/mp4",
              src: "http://edge.flowplayer.org/night4.mp4"
            }
          ]
        }]
    }).on('cuepoint', function(ev, api, cue) {
      console.log('video.index', api.video.index);
      console.log('cue', cue);
    });
    </script>


</body>

